<script setup lang="ts">
import axios, { type AxiosResponse } from "axios";
import { onMounted, ref } from "vue";
type BannerList = {
  imgUrl: string;
}[];
interface Result {
  code: string;
  msg: string;
  result: BannerList;
}
const list = ref<BannerList>([]);

const person = ref<{
    name: string 
    age: number
 }>({
    name: '张三',
    age: 20
 })
// 获取轮播图数据
const getBanner = async () => {
  const res = await axios.get<null, AxiosResponse<Result>>(
    "https://meikou-api.itheima.net/home/banner"
  );
  list.value = res.data.result;
};
// 挂载周期
onMounted(() => {
  getBanner();
});
</script>

<template>
  <div class="container">
    <!-- 循环生成谁 就在谁的上面写v-for -->
    <img
      :key="item.imgUrl"
      :src="item.imgUrl"
      alt=""
      v-for="(item, index) in list"
    />
  </div>

  <p>
      <ul>
        <!-- v-for遍历对象 -->
        <li v-for="( value, key) in person" :key="key">{{ value }}-{{ key }}</li>
      </ul>
   </p>
   <p>
    <ul>
        <!-- 遍历数字 -->
        <li v-for="item in 100">{{ item }}</li>
    </ul>
   </p>
</template>

<style scoped>
.container {
  width: 100%;
  height: 200px;
  text-align: center;
}
.container img {
  width: 300px;
  height: 100%;
  margin: 10px 20px;
}
</style>
